<template>
    <view class="frog-input">
        <input class="frog-input--inner" v-model="inputValue" :type="type" :placeholder="placeholder" :maxlength="max"
            @input="handleInput()" @focus="handleFocus()" @blur="handleBlur()" :class="[
                {
                    'frog-input--focus':isFocus
                }
            ]">
    </view>
</template>

<script>
    export default {
        name: 'FrogInput',
        props: {
            value: {
                type: String,
                default: ''
            },
            type: {
                type: String,
                default: 'text'
            },
            placeholder: String,
            max: {
                type: [Number, String],
                validator(val) {
                    if (typeof val === 'string') {
                        return Number(val);
                    }
                }
            },
            min: {
                type: [Number, String],
                validator(val) {
                    if (typeof val === 'string') {
                        return Number(val);
                    }
                }
            }
        },
        data() {
            return {
                inputValue: this.value,
                isFocus: false,
            };
        },
        methods: {
            handleInput(event) {
                this.$emit('input', this.inputValue);
            },
            handleFocus(event) {
                this.isFocus = true;
                this.$emit('focus', event);
            },
            handleBlur(event) {
                this.isFocus = false;
                this.$emit('blur', event);
            }
        },
        watch:{
            value(newValue){
                this.inputValue = newValue;
            }
        }
    }
</script>

<style>
    .frog-input {
        position: relative;
        font-size: 16px;
    }

    .frog-input--inner {
        display: inline-block;
        outline: none;
        background-color: #fff;
        border-radius: 6px;
        box-sizing: border-box;
        color: #333333;
        font-size: inherit;
        padding: 0 12px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #dcdfe6;
        width: 100%;
        transition: all 0.2s;
    }
    
    .frog-input--focus{
        border:1px solid #0477FF;
    }
</style>